<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XPath-CSS Finder - Error</title>
    <link rel="stylesheet" href="css/tailwind.css">
    <style>
        body {
            min-width: 320px;
            min-height: 200px;
        }
    </style>
</head>

<body class="bg-gray-100 p-4">
    <div class="bg-white rounded-lg shadow-md p-4">
        <div class="flex items-center justify-between mb-4">
            <h1 class="text-xl font-bold text-gray-800">XPath-CSS Finder</h1>
            <div class="text-red-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
            </div>
        </div>

        <div class="mb-4 text-sm font-medium text-red-600">
            Cannot run on this page
        </div>

        <div class="text-xs text-gray-700 mt-4">
            <p class="mb-2">XPath-CSS Finder cannot run on:</p>
            <ul class="list-disc pl-5 space-y-1">
                <li>Chrome internal pages (chrome://)</li>
                <li>Extension pages (chrome-extension://)</li>
                <li>PDF files</li>
                <li>Pages with restricted access</li>
            </ul>
        </div>

        <div class="text-xs text-gray-500 mt-4">
            Please try on a regular web page
        </div>
    </div>
</body>

</html>
